<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
    <go-top></go-top>
  </div>
</template>

<script>
  import axios from 'axios'
  // 1.引入组件
  import CityHeader from './components/Header'
  import CitySearch from './components/Search'
  import CityList from './components/List'
  import CityAlphabet from './components/Alphabet'
  import goTop from '../../common/gotop/goTop'

  export default {
    name: 'City',
    // 2.注册组件
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet,
      goTop
    },
    data () {
      return {
        // JSON 数据存储
        cities: {},
        hotCities: [],
        letter: '',
      }
    },
    methods: {
      // 发送 ajax 请求
      getCityInfo () {
        axios.get('./api/city.json')
          .then(this.handleGetCityInfoSucc)
      },
      handleGetCityInfoSucc (res) {
        console.log(res)
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          // 获取 JSON 数据，赋值给data 变量中
          this.cities = data.cities
          this.hotCities = data.hotCities
        }
      },
      // 监听，字母表传值
      handleLetterChange (letter) {
        console.log('父组件事件监听器： ' + letter)

        // 接收--字母表传值， 再转发给list组件
        this.letter = letter
      }

    },
    mounted () {
      // 当页面挂载时，自动执行该方法
      this.getCityInfo()
    }
  }
</script>

<style scoped lang="stylus">

</style>
